<template>
  <div>
    <div class="real_cont">
      <div class="real_time_slctel">
        <div class="real_time_slctel_left">
        </div>
        <div class="real_time_slctel_right">
          <div></div>
          <div></div>
          <div class="el-icon-s-home conthome"></div>
        </div>
      </div>

      <div class="real_hader">
        <div class="real_hader_title">
          <svg
            width="100%"
            height="75"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            preserveAspectRatio="xMinYMin meet"
          >
            <g stroke="block" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Group-6" transform="translate(398.000000, -23.000000)">
                <text class="svg_text" :x="this.x" :y="this.y">
                  当班缺陷趋势看板
                </text>
                <image
                  id="未标题-4"
                  x="28"
                  y="9"
                  width="568"
                  height="131"
                  xlink:href=""
                ></image>
                <polygon
                  id="Stroke-1"
                  stroke="#5BD1FB"
                  stroke-width="2"
                  opacity="0.4"
                  points="0 0 100 98 665 98 765 0"
                ></polygon>
                <polyline
                  id="Path-4"
                  stroke="#5BD1FB"
                  stroke-width="4"
                  stroke-linecap="round"
                  points="83 81 101.24847 98.167538 121.346043 98.167538"
                ></polyline>
                <polyline
                  id="Path-4-Copy"
                  stroke="#5BD1FB"
                  stroke-width="4"
                  stroke-linecap="round"
                  transform="translate(663.173022, 89.583769) scale(-1, 1) translate(-663.173022, -89.583769) "
                  points="644 81 662.24847 98.167538 682.346043 98.167538"
                ></polyline>
              </g>
              <g
                xmlns="http://www.w3.org/2000/svg"
                stroke="#5BD1FB"
                stroke-width="2"
                opacity="0.4"
                fill="none"
              >
                <!-- <path d="" /> -->
                <!-- <path class="path1" d="M0.5 0.5L39.5 39.5 L607.5 39.5 L568.5 0.5Z" /> -->
                <!-- <path d="M1352.5 0.5L1313.5 39.5L1881.5 39.5L1919.5 0.5Z" /> -->
              </g>
            </g>
          </svg>
        </div>
        <div class="real_hader_bar">
          <div id="real_bar_box">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 290,
      y: 65,
      limit: 4,
      lineList: [],
      RecipeList: [],
      formInline: {
        line: "",
        site: "",
      },
      xAis: ["21", "22"],
      options: [],
      Timerequest:null,
      value2: [],
      deflist: [],
      resxAis:[],
      redsdeflist:[],
    };
  },
  mounted() {
    this.realclick();

    // this.reaitimrclick()
  },
  methods: {
    oncheng() {
      console.log(this.value2);
    },
    //获取 站点 线体
    realclick() {
      this.ajax
        .get(
          `prod/1022?line=${this.formInline.line}&site=${this.formInline.site}`
        )
        .then((res) => {
          console.log(res.data);
          this.deflist = res.data.def;
          this.xAis = res.data.xAis;
          if (this.deflist) {
            this.reaitimrclick();
          }
            //   this.lineList = res.data.line;
            //   this.RecipeList = res.data.site;
        });
    },

     //定时请求方法
     tiemreqEst(){
         this.ajax
        .get(
          `prod/1022?line=${this.formInline.line}&site=${this.formInline.site}`
        )
        .then((res) => {
          console.log('定时请求111111111111',res.data);
          this.redsdeflist = res.data.def;
          this.resxAis = res.data.xAis;
        });
     },
  
 

    reaitimrclick() {
      let query_barey = this.$echarts.init(
        document.getElementById("real_bar_box")
      );
      var list = [];
      var datalist = [];
      var Bardata = this.deflist
      for (let i = 0; i < this.deflist.length; i++) {
        datalist.push(this.deflist[i].val);
      }
      
      

      this.deflist.forEach((ele) => {
        list.push({
          name: ele.key,
          data: ele.val.map((item) => {
            return item.val;
          }),
          type: "bar",
          stack: "a",
          barWidth: 0,
          label: {
            show: true,
            formatter: function (parmas) {
              return  ele.val[parmas.dataIndex].text;
            },
          },
        });
      });

      var option = {
        title: {
          text: "当班TOP10缺陷趋势统计",
          left: "center",
          top:"5%",
          y: "0%",
          textStyle: {
            fontWeight: 300,
            color:"#ffffff"
          },
          subtext:"TOP1-TOP2-TOP3-TOP4-TOP5-TOP6-TOP7-TOP8-TOP9-TOP10",
          // top:"3%",
          subtextStyle:{
             fontWeight: 200,
             color:"#ffffff"
          }
        },
        tooltip: {
          trigger: "item",
          showContent:true,
          formatter:function(params){
            for(let i=0; i<Bardata.length; i++){
              for(let j=0;j<Bardata[i].val.length;j++){
                 if(Bardata[i].val[j].val == params.value){
                   return Bardata[i].val[j].text
                 }
              }
              
              
            }
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow axis'
          },
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
     
        },
        legend: {
          data: this.xAis,
        },
        grid: {
          left: "5%",
          right: "7%",
          bottom: "2%",
          height: 420,
          containLabel: true,
        },
        xAxis: {
          type: "category",
           axisLine: {
                    lineStyle: {
                        color: "#fff",
                    }
                    },
          data: this.xAis,
        },
        // dataZoom: [
        //   {
        //     type: "slider",
        //     show: true,
        //     start: 94,
        //     end: 100,
        //     handleSize: 8,
        //   },
        //   {
        //     type: "inside",
        //     start: 94,
        //     end: 100,
        //   },
        //   {
        //     type: "slider",
        //     show: true,
        //     yAxisIndex: 0,
        //     filterMode: "empty",
        //     width: 12,
        //     height: "70%",
        //     handleSize: 8,
        //     showDataShadow: false,
        //     left: "93%",
        //   },
        // ],
        yAxis: {
          type: "value",
          axisLine: {
                    lineStyle: {
                        color: "#fff",
                    }
                    },
          // data:list1,
        },
        series: list,
      }
      query_barey.setOption(option,true);
      this.Timerequest = setInterval(()=>{
          list = [];
          this.deflist = [];
          // this.xAis = [];
          this.tiemreqEst();
           setTimeout(()=>{
                console.log('111111111111111111111',this.redsdeflist);
                // console.log('22222222222222222222', this.resxAis)
                    this.xAis = this.resxAis;
                    this.redsdeflist.forEach((ele) => {
                        list.push({
                        name: ele.key,
                        data: ele.val.map((item) => {
                            return item.val;
                        }),
                        type: "bar",
                        stack: "a",
                        barWidth: 0,
                        label: {
                            show: true,
                            formatter: function (parmas) {
                            return  ele.val[parmas.dataIndex].text;
                            },
                        },
                        });
                        // indexa++;
                        // console.log('11111111111',indexa)
                    });
                    //    var option = {
                        query_barey.setOption({
                            xAxis: {
                                 type: "category",
                                 axisLine: {
                                             lineStyle: {
                                                 color: "#fff",
                                             }
                                             },
                                 data: this.xAis,
                             },
                             series: list,
                        })
               
           console.log('更新完成')
           },3000)
      },300000)
        query_barey.setOption(option,true);
        window.addEventListener("resize", function () {
        query_barey.resize();
      });
    },
  },
};
</script>

<style  scoped>
.real_cont {
  width: 100%;
  /* border: 1px solid #000; */
}
.real_time_slctel {
  width: 100%;
  /* border: 1px red solid; */
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 0px 0px 0.5px gainsboro;
}
.real_time_slctel_left {
  width: 60%;
  /* border: 1px solid #000; */
  display: flex;
}
.real_time_slctel_right {
  width: 30%;
  /* border: 1px solid #000; */
  display: flex;
  justify-content: space-between;
}
.real_hader {
  width: 100%;
  margin: 20px auto;
  /* border: 1px solid yellow; */
  background: #09163d;
  /* position: absolute; */
  padding-bottom: 10px;
}
.real_hader_title {
  width: 100%;
}
.svg_text {
  font-size: 24px;
  fill: #ffffff;
}
.conthome {
  font-size: 40px;
}
.real_hader_bar {
  width: 100%;
  /* border: 1px solid blue; */
  /* margin-bottom: 30px; */
}
#real_bar_box {
  width: 95%;
  height: 70vh;
  /* border: 1px solid red; */
  margin: 20px auto;
  margin-bottom: 30px;
  box-shadow: 0px 0px 0px 1px gainsboro;
}
@media screen and (min-width:1920px) {
   
  #Group-6
  {
   transform:translate(577.000000px, -23.000000px)
  }

   .real_hader
   {
      width: 100%;
      margin: 30px auto;
      /* border: 1px solid yellow; */
      /* background: #09163d; */
      /* position: absolute; */
      padding-bottom: 10px;
   }
   #real_bar_box {
      width: 80%;
      height: 70vh;
      /* border: 1px solid red; */
      margin-bottom: 50px;
      box-shadow: 0px 0px 0px 1px gainsboro;
   }  
}
</style>